<!DOCTYPE html>
<html>
<head>
    <title>{$site_name}</title>
    <meta name="keywords" content="{$site_seo_keywords}"/>
    <meta name="description" content="{$site_seo_description}">
    <meta name="author" content="ThinkCMF">
    <script type="text/javascript" src="__PUBLIC__/js/rem.js"></script>
    <tc_include file="Public:head"/>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        .js-ajax-submit {
            font-size: 18px!important;
            letter-spacing: 2px;
        }
        .sms_code_but {
            border: 1px transparent;
            width: 90px;
            background-color: white;
            padding: 7px 0px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            position: absolute;
        }
        .path span {
            font-weight: bold;
            letter-spacing: 1px;
            color: #000232;
        }
        .path .path_active {
            color: #000232;
            opacity: .58;
            filter: alpha(opacity=58);
        }
        @media screen and (max-width: 750px) {
            .mobile_bg {
                background-image: url("{:sp_get_asset_upload_path('http://video.rixins.com/image/default/CCABCCCF0C5B4A209E7786133C81AC14-6-2.png')}");
            }
            body {
                padding: 0;
                margin: 0;
            }
            .tp img {
                height: .3rem!important;
                margin-right: .1rem;
            }
            .navbar {
                display: none;
            }
            .control-group {
                height: .3rem!important;
            }
            .control-group input {
                height: .3rem!important;
            }

            .yzm2 input {
                width: 1.46rem!important;
                margin-left: -4.8rem!important;
                height: .28rem!important;
                padding: 0;
                margin: 0px;
                padding-left: .05rem;
            }
            .yzm2 {
                text-align: left;
                margin-left: 4rem!important;
                padding: 0;
                margin: 0px;
                width: 1.5rem;
                height: .3rem;
            }
            .yzm2 span {
                height: .18rem;
                text-align: center;
                line-height: .18rem;
            }
            .control-group .js-ajax-submit {
                height: .3rem!important;
            }
        }
        @media screen and (min-width: 750px) {
            .mobile_bg {
                background-image:url("{:sp_get_asset_upload_path('http://video.rixins.com/image/default/44FEBEDB4CD84F99A9F13678A51AD485-6-2.jpg')}");
            }
            .sms_code_but {
                top: -7px;
                right: 2px;
                width: 95px;
            }

        }
    </style>
</head>

<body class="body-white">
<tc_include file="Public:nav"/>

<div class="container tc-main loginmain mobile_bg" style="min-height:731px;">
    <div class="logindiv logindiv_position" style="margin: -160px 0 0 -150px;">
        <div class="span4  ">
            <div class="tab-pane active" id="email">
                <form class="form-horizontal js-ajax-form" action="{:U('user/register/doregister')}" method="post">
                    <div class="path">
                        <span><a href="/index.php?g=user&m=login&a=index" class="path_active">账号登录</a></span>
                        <span >  新用户注册</span>
                    </div>
                    <div class="control-group">
                        <input type="number" name="mobile" placeholder="手机号" class="span4 input_username">
                    </div>

                    <div class="control-group">
                        <input type="password" name="password" placeholder="密码" class="span4 input_password">
                    </div>

                    <div class="control-group">
                        <input type="password" name="repassword" placeholder="重复密码" class="span4 input_password">
                    </div>

                    <div class="control-group">
                        <div class="yzm">
                            <input type="text" class="span4 yzm_ipt" name="verify" placeholder="验证码">
                            <span class="tp"> {:sp_verifycode_img('length=4&font_size=14&width=100&height=34&charset=1234567890&use_noise=1&use_curve=0')}</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <di class="yzm yzm2" >
                            <input type="text" class="yzm_ipt sms_code" name="sms_code" placeholder="手机验证码" >
                            <span class="sms_code_but">点击获取</span>
                        </di>
                    </div>

                    <div class="control-group">
                        <button class="btn btn-primary js-ajax-submit span4" type="submit" data-wait="1500" style="">
                            完成并登录
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- /container -->
<tc_include file="Public:footer"/>
<tc_include file="Public:scripts"/>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
<script>
    var sending = false;
    var timer   = 0;
    var sec     = 0;
    $('.sms_code_but').click(function () {
        if (!sending) {

            var _this   = $(this);
            var phone   = $("input[name='mobile']").val();

            if (!isPhoneAvailable(phone)) {
                layer.msg("请输入正确的手机号");
                return;
            }

            if ($("input[name='verify']").length > 0) {
                var verify  = $("input[name='verify']").val();
                if (!verify) {
                    layer.msg("请输入验证码");
                    return;
                }
            }

            $.post("{:U('User/Public/send_aliyun_sms')}", {phone : phone, verify : verify}, function (re) {
                if (re.status) {
                    layer.msg(re.info);
                    sending = true;
                    sec     = 60;
                    timer   = setInterval('change_sms_but()', 1000);
                    change_sms_but();

                } else {
                    layer.msg(re.info);
                }
            })
        }
    });

    function change_sms_but() {
        var but = $('.sms_code_but');
        if (sec == 1) {
            but.html("点击获取");
            clearInterval(timer);
            sending = false;
            sec     = 60;
        } else {
            sec--;
            but.html(sec + 's后获取');
        }
    }

    function isPhoneAvailable(str) {
        var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        if (!myreg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>